<template>
  <div class="shop-detail">
    <!-- 店铺基本信息部分 -->
    <section class="shop-header">
      <!-- 添加返回按钮 -->
      <div class="back-header">
        <button class="back-btn" @click="goBack">
          <svg class="icon-back" viewBox="0 0 24 24" width="16" height="16">
            <path
              fill="currentColor"
              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
            />
          </svg>
          返回
        </button>
      </div>
      <div class="shop-info">
        <div class="shop-basic">
          <img :src="shop.shopPic" :alt="shop.shopName" class="shop-logo" />
          <div class="shop-text">
            <h1 class="shop-name">{{ shop.shopName }}</h1>
            <div class="shop-rating">
              <span class="rating">{{ shop.rating }}分</span>
              <span class="orders">月售 {{ shop.monthlyOrders }}</span>
            </div>
            <div class="shop-tags">
              <span v-for="tag in shopTags" :key="tag" class="tag">{{
                tag
              }}</span>
            </div>
            <div class="shop-address">
              <i class="icon-location"></i>
              <span>{{ shop.shopAddress }}</span>
            </div>
          </div>
        </div>
        <div class="shop-contact">
          <button class="contact-btn" @click="contactShop">
            <i class="icon-phone"></i>联系商家
          </button>
        </div>
      </div>

      <!-- 店铺活动轮播 -->
      <div class="shop-activities">
        <div class="activity-header">
          <h3>店铺活动</h3>
          <div class="activity-pagination">
            <span>{{ currentBatch + 1 }}/{{ totalBatches }}</span>
            <div class="pagination-btns">
              <button :disabled="currentBatch === 0" @click="prevBatch">
                <i class="icon-prev"></i>
              </button>
              <button
                :disabled="currentBatch === totalBatches - 1"
                @click="nextBatch"
              >
                <i class="icon-next"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="activity-list">
          <div
            v-for="activity in activities"
            :key="activity.id"
            class="activity-item"
            @click="viewActivity(activity)"
          >
            <img :src="activity.activityPic" :alt="activity.activityName" />
            <div class="activity-info">
              <div class="activity-name">{{ activity.activityName }}</div>
              <div class="activity-time">
                {{ activity.activityStart }} - {{ activity.activityOver }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技师列表部分 -->
    <section class="staff-section">
      <div class="section-title">
        <h2>专业技师团队</h2>
        <div class="staff-filter">
          <button
            v-for="level in staffLevels"
            :key="level.type"
            :class="['level-btn', { active: currentStaffLevel === level.type }]"
            @click="filterStaffByLevel(level.type)"
          >
            {{ level.name }}
          </button>
        </div>
      </div>
      
        <div class="staff-list">
          <div v-for="staff in employeeList" :key="staff.id" class="staff-card">
            <router-link
        :to="{
          path: '/employeeDetail',
          query: {
            employeeName: staff.employeeName,
          },
        }"
      >
            <div class="staff-avatar">
              <img :src="staff.employeePic" :alt="staff.employeeName" />
              <span class="staff-level">{{ staff.employeeLevel }}</span>
            </div>
            <div class="staff-info">
              <div class="staff-header">
                <h3 class="staff-name">{{ staff.employeeName }}</h3>
                <span class="staff-years">从业{{ staff.workYears }}年</span>
              </div>
              <div class="staff-skills">
                <span
                  v-for="skill in staff.skills.split(',')"
                  :key="skill"
                  class="skill-tag"
                >
                  {{ skill }}
                </span>
              </div>
              <div class="staff-rating">
                <div class="rating-stars">
                  <i
                    v-for="n in 5"
                    :key="n"
                    class="icon-star"
                    :class="{ active: n <= staff.rating }"
                  ></i>
                </div>
                <span class="rating-score">{{ staff.rating }}分</span>
                <span class="rating-count">({{ staff.commentCount }}评价)</span>
              </div>
            </div>
            <button class="book-staff-btn">预约</button>
          </router-link>
          </div>
          
        </div>
      
    </section>
    <!-- 服务列表部分 -->
    <section class="services-section">
      <div class="section-header">
        <div class="tabs">
          <span
            v-for="tab in tabs"
            :key="tab.type"
            :class="['tab-item', { active: currentTab === tab.type }]"
            @click="switchTab(tab.type)"
          >
            {{ tab.name }}
          </span>
        </div>
        <div class="filter-btns">
          <button
            v-for="filter in filters"
            :key="filter.type"
            :class="['filter-btn', { active: currentFilter === filter.type }]"
            @click="applyFilter(filter.type)"
          >
            {{ filter.name }}
          </button>
        </div>
      </div>

      <!-- 服务列表 -->
      <div v-show="currentTab === 'services'" class="service-list">
        <div
          v-for="service in serviceList"
          :key="service.id"
          class="service-card"
          @click="viewService(service)"
        >
          <img
            :src="service.servicePic"
            :alt="service.serviceName"
            class="service-image"
          />
          <div class="service-info">
            <h3 class="service-name">{{ service.serviceName }}</h3>
            <p class="service-desc">{{ service.serviceDetails }}</p>
            <div class="service-bottom">
              <div class="price">
                <span class="current">¥{{ service.servicePrice }}</span>
                <span class="original" v-if="service.servicePrice">
                  ¥{{ service.servicePrice }}
                </span>
              </div>
              <button class="book-btn">立即预约</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 套餐列表 -->
      <div v-show="currentTab === 'packages'" class="package-list">
        <div v-for="pkg in packages" :key="pkg.id" class="package-card">
          <div class="package-header">
            <h3>{{ pkg.name }}</h3>
            <span class="package-tag">{{ pkg.type }}</span>
          </div>
          <div class="package-items">
            <div v-for="item in pkg.items" :key="item.id" class="package-item">
              <span class="item-name">{{ item.name }}</span>
              <span class="item-times">x{{ item.times }}</span>
            </div>
          </div>
          <div class="package-bottom">
            <div class="package-price">
              <span class="current">¥{{ pkg.price }}</span>
              <span class="original">¥{{ pkg.originalPrice }}</span>
              <span class="save">省¥{{ pkg.originalPrice - pkg.price }}</span>
            </div>
            <button class="buy-btn">立即购买</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { listShop } from "@/api/shop/shop";
import { listEmployee } from "@/api/shop/employee";
import { listService } from "@/api/shop/service";
import { listActivity } from "@/api/shop/activity";
// 获取路由实例和店铺ID参数
const route = useRoute();
const router = useRouter();
// 返回方法
const goBack = () => {
  router.back();
};
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    shopName: route.query.shopName,
    shopDesc: null,
    shopNumber: null,
    shopStatus: null,
    shopTimeStart: null,
    shopPic: null,
    shopAddress: null,
    phoneNumber: null,
    employeeName: null,
    bossName: null,
  },
  queryEmployeeParams: {
    pageNum: 1,
    pageSize: 10,
    employeeName: null,
    employeeTimeStart: null,
    employeeStatus: null,
    employeeDesc: null,
    employeePic: null,
    shopName: route.query.shopName,
  },
  queryServiceParams: {
    pageNum: 1,
    pageSize: 10,
    serviceName: null,
    serviceCategory: null,
    serviceDetails: null,
    servicePic: null,
    serviceTime: null,
    servicePrice: null,
    sold: null,
    shopName: route.query.shopName,
    launchTime: null,
    downTime: null,
    serviceStatus: null,
  },
  queryActivityParams: {
    pageNum: 1,
    pageSize: 10,
    shopName: route.query.shopName,
    activityName: null,
    activityStatus: null,
    activityPic: null,
    activityDesc: null,
    activityDetails: null,
    activityStart: null,
    activityOver: null,
  },
});
const {
  queryParams,
  form,
  queryEmployeeParams,
  queryServiceParams,
  queryActivityParams,
} = toRefs(data);
// 店铺基本信息
const shop = ref(
  {}
  // name: '天之道足浴店',
  // logo: 'src/assets/images/4.jpg',
  // rating: 4.8,
  // monthlyOrders: 299,
  // tags: ['专业团队', '环境优雅', '技术过硬'],
  // address: '北京市朝阳区xx路xx号'
);
// 店铺标签
const shopTags = ref([]);
// 在组件挂载时根据shopName获取店铺详情
onMounted(() => {
  listShop(queryParams.value).then((res) => {
    shop.value = res.rows[0];
    shopTags.value = shop.value.tags.split(",");
    console.log(shop.value);
  });
});

const employeeList = ref([]);
// 在组件挂载时根据shopName获取店铺技师列表
onMounted(() => {
  listEmployee(queryEmployeeParams.value).then((res) => {
    employeeList.value = res.rows;
  });
});
const serviceList = ref([]);
// 在组件挂载时根据shopName获取店铺服务列表
onMounted(() => {
  listService(queryServiceParams.value).then((res) => {
    serviceList.value = res.rows;
    console.log(serviceList.value);
  });
});
// 活动相关
const activities = ref([
  // 每批4个活动
  // [
  //   {
  //     id: 1,
  //     name: "开业大酬宾",
  //     image: "src/assets/images/activity1.jpg",
  //     time: "2024.1.1-2024.1.15",
  //   },
  //   {
  //     id: 2,
  //     name: "新年特惠",
  //     image: "src/assets/images/activity1.jpg",
  //     time: "2024.1.1-2024.1.31",
  //   },
  //   // ...更多活动
  // ],
]);

// 在组件挂载时根据shopName获取店铺活动列表
onMounted(() => {
  listActivity(queryActivityParams.value).then((res) => {
    activities.value = res.rows;
    console.log(activities.value);
  });
});
const currentBatch = ref(0);
const totalBatches = computed(() => activities.value.length);
const currentActivities = computed(() => activities.value[currentBatch.value]);

// 技师相关数据
const staffLevels = ref([
  { type: "all", name: "全部" },
  { type: "senior", name: "高级" },
  { type: "expert", name: "专家" },
  { type: "master", name: "大师" },
]);

const currentStaffLevel = ref("all");

const staffList = ref([
  {
    id: 1,
    name: "张师傅",
    avatar: "src/assets/images/banner1.jpg",
    level: "大师",
    years: 15,
    skills: ["推拿", "足疗", "按摩"],
    rating: 4.9,
    commentCount: 328,
    levelType: "master",
  },
  // ... 更多技师数据
]);

const filteredStaff = computed(() => {
  if (currentStaffLevel.value === "all") {
    return staffList.value;
  }
  return staffList.value.filter(
    (staff) => staff.levelType === currentStaffLevel.value
  );
});

const filterStaffByLevel = (type) => {
  currentStaffLevel.value = type;
};

// 服务相关
const tabs = ref([
  { type: "services", name: "单项服务" },
  { type: "packages", name: "套餐" },
]);
const currentTab = ref("services");

const filters = ref([
  { type: "all", name: "全部" },
  { type: "popular", name: "最受欢迎" },
  { type: "new", name: "新品上架" },
]);
const currentFilter = ref("all");

// 方法
const prevBatch = () => {
  if (currentBatch.value > 0) {
    currentBatch.value--;
  }
};

const nextBatch = () => {
  if (currentBatch.value < totalBatches.value - 1) {
    currentBatch.value++;
  }
};

const switchTab = (type) => {
  currentTab.value = type;
};

const applyFilter = (type) => {
  currentFilter.value = type;
};
</script>

<style scoped>
/* 修改所有按钮的基础样式 */
button {
  outline: none; /* 移除点击时的外边框 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

.shop-detail {
  padding: 15px;
  background: #f5f5f5;
}
/* 添加返回按钮样式 */
.back-header {
  display: flex;
  align-items: flex-start;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eee;
  border-radius: 20px;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.back-btn:hover {
  background: #fff;
  color: #ff4d4f;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.icon-back {
  width: 16px;
  height: 16px;
}
/* 确保shop-header有相对定位 */
.shop-header {
  position: relative;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* 修改联系商家按钮 */
.contact-btn {
  padding: 8px 20px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-btn:hover {
  background: #ff7875;
}

.contact-btn:active {
  background: #f5222d;
}

/* 修改活动切换按钮 */
.pagination-btns button {
  border: none;
  background: transparent;
  padding: 4px 8px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
}

/* 店铺头部样式 */
.shop-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.shop-info {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-basic {
  display: flex;
  gap: 15px;
}

.shop-logo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.shop-name {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px;
}

.shop-rating {
  margin-bottom: 10px;
}

.rating {
  color: #ff4d4f;
  font-weight: 500;
  margin-right: 10px;
}

.orders {
  color: #666;
  font-size: 14px;
}

.shop-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tag {
  padding: 2px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.shop-address {
  color: #666;
  font-size: 14px;
}

.contact-btn {
  padding: 8px 20px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 技师列表样式 */
.staff-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.staff-filter {
  display: flex;
  gap: 10px;
}

.level-btn {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.level-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.level-btn.active {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}

.staff-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.staff-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  gap: 15px;
  position: relative;
}

.staff-avatar {
  position: relative;
  width: 80px;
  height: 80px;
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.staff-level {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4d4f;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.staff-info {
  flex: 1;
}

.staff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.staff-name {
  font-size: 16px;
  margin: 0;
}

.staff-years {
  color: #666;
  font-size: 12px;
}

.staff-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.skill-tag {
  padding: 2px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.staff-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-stars {
  color: #ffd700;
}

.rating-score {
  color: #ff4d4f;
  font-weight: 500;
}

.rating-count {
  color: #999;
  font-size: 12px;
}

.book-staff-btn {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 6px 15px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.book-staff-btn:hover {
  background: #ff7875;
}

@media screen and (max-width: 768px) {
  .staff-list {
    grid-template-columns: 1fr;
  }
}

/* 活动区域样式 */
.shop-activities {
  width: 360px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-btns {
  display: flex;
  gap: 5px;
}

.pagination-btns button {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.pagination-btns button:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.activity-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.activity-item {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.activity-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.activity-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
}

.activity-name {
  font-size: 12px;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 10px;
  opacity: 0.8;
}

/* 服务列表样式 */
.services-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.tab-item {
  padding: 8px 0;
  cursor: pointer;
  position: relative;
}

.tab-item.active {
  color: #ff4d4f;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff4d4f;
}

.filter-btns {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.filter-btn.active {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}

/* 服务卡片样式 */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.service-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.service-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.service-info {
  padding: 12px;
}

.service-name {
  font-size: 16px;
  margin: 0 0 8px;
}

.service-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.service-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price .current {
  color: #ff4d4f;
  font-size: 18px;
  font-weight: bold;
}

.price .original {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 5px;
}

.book-btn {
  padding: 6px 12px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.book-btn:hover {
  background: #ff7875;
}

.book-btn:active {
  background: #f5222d;
}

/* 套餐卡片样式 */
.package-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.package-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.package-tag {
  padding: 2px 8px;
  background: #fff2f0;
  color: #ff4d4f;
  border-radius: 2px;
  font-size: 12px;
}

.package-items {
  margin-bottom: 15px;
}

.package-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.package-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.package-price .current {
  color: #ff4d4f;
  font-size: 20px;
  font-weight: bold;
}

.package-price .original {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 5px;
}

.package-price .save {
  color: #ff4d4f;
  font-size: 12px;
  margin-left: 5px;
}

.buy-btn {
  padding: 6px 15px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.buy-btn:hover {
  background: #ff7875;
}

.buy-btn:active {
  background: #f5222d;
}
@media screen and (max-width: 768px) {
  .shop-header {
    flex-direction: column;
  }

  .shop-activities {
    width: 100%;
  }

  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .package-list {
    grid-template-columns: 1fr;
  }
}
</style>
